<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
  <meta name="theme-color" content="#f3f3f3">
  <meta name="msapplication-navbutton-color" content="#f3f3f3">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="Wayback">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="#f3f3f3">
  <meta name="referrer" content="no-referrer">
  <meta name="google" content="notranslate">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'nonce-SqWG86Q2X2oU'; require-trusted-types-for 'script'; trusted-types tt-policy;">
  <meta name="description" content="Wayback Archiver - Privacy-Focused Archiving Tool with IM-Style Interface — Integrates with Internet Archive, archive.today, Ghostarchive, IPFS, Telegraph, and File Systems for Easy, Secure Content Preservation.">
  <meta name="keywords" content="wayback, archiver, web archive, page archive, content archiving, internet archive, web page storage">
  <meta name="author" content="Wayback Archiver">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://github.com/wabarc">
  <meta property="og:title" content="Wayback Archiver">
  <meta property="og:description" content="Privacy-Focused Archiving Tool with IM-Style Interface — Integrates with Internet Archive, archive.today, Ghostarchive, IPFS, Telegraph, and File Systems for Easy, Secure Content Preservation.">
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/66000339">
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://github.com/wabarc">
  <meta property="twitter:title" content="Wayback Archiver">
  <meta property="twitter:description" content="Privacy-Focused Archiving Tool with IM-Style Interface — Integrates with Internet Archive, archive.today, Ghostarchive, IPFS, Telegraph, and File Systems for Easy, Secure Content Preservation.">
  <meta property="twitter:image" content="https://avatars.githubusercontent.com/u/66000339">
  <title>Wayback Archiver</title>
  <link rel="manifest" href="{{ route "manifest" "filename" "manifest.json" }}" crossorigin="use-credentials" />
  <link rel="icon" href="{{ route "favicon" "filename" "favicon.ico" }}">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ route "icon" "filename" "favicon-16.png" }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ route "icon" "filename" "favicon-32.png" }}">
  <link rel="icon" type="image/png" sizes="128x128" href="{{ route "icon" "filename" "icon-128.png" }}">
  <link rel="icon" type="image/png" sizes="192x192" href="{{ route "icon" "filename" "icon-192.png" }}">
  <link rel="apple-touch-icon" sizes="120x120" href="{{ route "icon" "filename" "icon-120.png" }}">
  <link rel="apple-touch-icon" sizes="152x152" href="{{ route "icon" "filename" "icon-152.png" }}">
  <link rel="apple-touch-icon" sizes="167x167" href="{{ route "icon" "filename" "icon-167.png" }}">
  <link rel="apple-touch-icon" sizes="180x180" href="{{ route "icon" "filename" "icon-180.png" }}">
  <style nonce="SqWG86Q2X2oU">
    :root {
      --c-light-text: #333;
      --c-light-textarea: #222;
      --c-light-background: #f7f7f7;
      --c-light-form-background: #fff;

      --c-dark-text: #fcfcfc;
      --c-dark-textarea: #b4c9d4;
      --c-dark-background: #222222ed;
      --c-dark-form-background: #3e3e3e;

      --transition-duration: 0.3s;
      --transition-timing: ease-in-out;

      --base-size: 1em;
      --font-size: var(--base-size) * .75;
      --spacing-unit: 0.5em;
      --wrapper-width: 630px;

      --textarea-height: calc(var(--base-size) * 7);
      --textarea-font-size: var(--font-size);
      --textarea-padding: calc(var(--base-size) * 0.5);

      --button-font-size: calc(var(--base-size));
      --button-size: calc(var(--base-size) * 1.85);
      --button-height: var(--button-size);
      --button-width: var(--button-size);
      --button-bottom: calc(var(--base-size) * 1.8);

      --privacy-padding: calc(var(--spacing-unit) * 2);
      --privacy-font-size: calc(var(--base-size) * 0.75);
    }

    * {
      transition: color var(--transition-duration) var(--transition-timing),
                  background-color var(--transition-duration) var(--transition-timing);
    }

    @media (max-width: 1200px) {
      :root {
        --base-size: 0.95em;
        --font-size: var(--base-size) * .75;
        --spacing-unit: 0.5em;
        --wrapper-width: 630px;

        --textarea-height: calc(var(--base-size) * 7);
        --textarea-font-size: var(--font-size);
        --textarea-padding: calc(var(--spacing-unit) * 0.5);

        --button-font-size: var(--font-size);
        --button-size: calc(var(--base-size) * 1.85);
        --button-height: var(--button-size);
        --button-width: var(--button-size);
        --button-bottom: calc(var(--spacing-unit) * 2.4);

        --privacy-padding: calc(var(--spacing-unit) * 1.8);
        --privacy-font-size: calc(var(--base-size) * 0.75);
      }
    }

    @media (max-width: 900px) {
      :root {
        --base-size: 0.85em;
        --font-size: var(--base-size) * .75;
        --spacing-unit: 0.4em;
        --wrapper-width: 500px;

        --textarea-height: calc(var(--base-size) * 8);
        --textarea-font-size: var(--font-size);
        --textarea-padding: calc(var(--spacing-unit) * 0.5);

        --button-font-size: var(--font-size);
        --button-size: calc(var(--base-size) * 1.85);
        --button-height: var(--button-size);
        --button-width: var(--button-size);
        --button-bottom: calc(var(--spacing-unit) * 2.75);

        --privacy-padding: calc(var(--spacing-unit) * 1.5);
        --privacy-font-size: calc(var(--base-size) * 0.7);
      }
    }

    @media (max-width: 600px) {
      :root {
        --base-size: 0.75em;
        --font-size: var(--base-size) * .75;
        --spacing-unit: 0.35em;
        --wrapper-width: 100%;

        --textarea-height: calc(var(--base-size) * 10);
        --textarea-font-size: var(--font-size);
        --textarea-padding: calc(var(--spacing-unit) * 0.5);

        --button-font-size: var(--font-size);
        --button-size: calc(var(--base-size) * 1.85);
        --button-height: var(--button-size);
        --button-width: var(--button-size);
        --button-bottom: calc(var(--spacing-unit) * 3.33);

        --privacy-padding: calc(var(--spacing-unit) * 1.2);
        --privacy-font-size: calc(var(--base-size) * 0.65);
      }
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
    }

    html {
      background-color: var(--c-light-background);
      -webkit-transition: color 300ms, background-color 300ms;
      -o-transition: color 300ms, background-color 300ms;
      transition: color 300ms, background-color 300ms;
    }

    * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    *::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-thumb {
      background: transparent;
    }

    @media (prefers-color-scheme: light) {
      html {
        background-color: var(--c-light-background);
        color: var(--c-light-text);
      }
    }

    @media (prefers-color-scheme: dark) {
      html {
        background-color: var(--c-dark-background);
        color: var(--c-dark-text);
      }
    }

    body {
      font: 100% / 1.5 "Open Sans", Helvetica, Arial, sans-serif;
      font-size: var(--font-size);
      -webkit-tap-highlight-color: transparent;
    }

    ::-webkit-scrollbar {
      background: transparent;
    }

    a {
      border: 1px blue;
      color: #999;
      width: 100%;
      float: left;
      text-decoration: none;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-transition: background-color 0.15s ease 0s;
      -o-transition: background-color 0.15s ease 0s;
      transition: background-color 0.15s ease 0s;
    }

    a:-webkit-any-link {
      text-decoration: none;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      float: left;
    }

    a:hover {
      color: #524d4b;
    }

    ::-moz-selection {
      background-color: #cfcfcfb4;
    }

    ::selection {
      background-color: #cfcfcfb4;
    }

    @media (prefers-color-scheme: dark) {
      ::-moz-selection {
        background-color: #cfcfcf30;
      }

      ::selection {
        background-color: #cfcfcf30;
      }
    }

    .wrapper {
      position: absolute;
      margin: auto;
      width: 99%;
      max-width: var(--wrapper-width);
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 12;
      overflow: hidden;
    }

    .form {
      border-radius: 4px;
      display: block;
      position: relative;
      background-color: var(--c-light-form-background);
      border: 1px solid #00000026;
      -webkit-box-shadow: 0 2px 3px #0000000f;
      box-shadow: 0 2px 3px #0000000f;
      margin: 0;
      padding: 0;
    }

    @media (prefers-color-scheme: dark) {
      .form {
        background-color: var(--c-dark-form-background);
        color: var(--c-dark-text);
      }
    }

    .box {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: .35rem;
    }

    textarea {
      visibility: visible;
      font-family: "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
      color: var(--c-light-textarea);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: var(--textarea-font-size);
      font-weight: normal;
      display: flex;
      background: none;
      outline: none;
      border: none;
      width: 100%;
      height: var(--textarea-height);
      z-index: 1;
      resize: none;
      text-align: justify;
      justify-content: center;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      grid-column-start: 1;
      grid-column-end: 3;
      padding: var(--textarea-padding);
      word-break: break-all;
    }

    textarea::-webkit-input-placeholder,
    textarea::-moz-placeholder,
    textarea:-ms-input-placeholder,
    textarea::-ms-input-placeholder,
    textarea::placeholder {
      color: #666;
    }

    @media (prefers-color-scheme: dark) {
      textarea {
        color: var(--c-dark-textarea);
      }
    }

    input[type="submit"] {
      visibility: visible;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font: normal normal normal 20px/1 FontAwesome;
      font-style: normal;
      font-weight: normal !important;
      font-variant: normal;
      text-rendering: auto;
      text-transform: none;
      text-decoration: none !important;
      cursor: pointer;
      background: transparent;
      text-align: center;
      border: none;
      z-index: 2;
      outline: none;
      font-size: var(--button-font-size);
      min-height: var(--button-height);
      line-height: 1.5;
      bottom: var(--button-bottom);
      height: var(--button-height);
      width: var(--button-width);
      border-radius: 50%;
      display: flex;
      color: #0a0a08;
      background-color: #dee3e79c;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-font-smoothing: subpixel-antialiased;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    input[type="submit"]:hover {
      -webkit-transition-duration: 0.4s;
      -o-transition-duration: 0.4s;
      transition-duration: 0.4s;
      background-color: #dee3e7;
    }

    input#wayback {
      grid-row-start: 2;
      grid-column-start: 2;
      justify-self: end;
      background-image: url(/icon/send.svg);
    }

    input#playback {
      grid-row-start: 2;
      grid-column-start: 1;
      background-image: url(/icon/search.svg);
    }

    .archived {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 65vh;
      background: #f5f5f5;
      margin: 0.5em;
      border-bottom: 1px solid #00000040;
    }

    ul.row {
      width: 100%;
      padding: 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
      list-style-type: none;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      flex-direction: row;
      margin: 10px 0;
      text-align: left;
      white-space: nowrap;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .src {
      z-index: 1;
      margin: 0;
      text-align: left;
      width: 35%;
      margin-right: .85rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (prefers-color-scheme: dark) {
      .src {
        color: #ccc;
      }
    }

    .dst {
      flex: auto;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      -webkit-flex: 0 1 65%;
      -ms-flex: 0 1 65%;
      width: 65%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }

    .add-button {
      display: none;
      position: fixed;
      top: 5px;
      left: 5px;
      height: 35px;
      text-align: center;
    }

    .privacy {
      position: relative;
      overflow-x: hidden;
      padding: var(--privacy-padding);
      line-height: 1.5;
      color: var(--c-light-text);
      font-size: var(--privacy-font-size);
      -webkit-transition: all var(--transition-duration) var(--transition-timing);
      -o-transition: all var(--transition-duration) var(--transition-timing);
      transition: all var(--transition-duration) var(--transition-timing);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border: 0;
      min-height: auto;
      min-width: auto;
      margin: 0;
    }

    .privacy a {
      color: var(--c-light-text);
      text-decoration: none;
      -webkit-transition: all var(--transition-duration) var(--transition-timing);
      -o-transition: all var(--transition-duration) var(--transition-timing);
      transition: all var(--transition-duration) var(--transition-timing);
    }

    .privacy a:hover {
      color: var(--c-light-text);
      text-decoration: underline;
      opacity: 0.8;
    }

    .privacy a:focus {
      outline: none;
      text-decoration: underline;
      -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
      box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    }

    @media (prefers-color-scheme: dark) {
      .privacy {
        color: var(--c-dark-text);
      }

      .privacy a {
        color: var(--c-dark-text);
      }
    }

    .privacy > .read {
      height: 14px;
      text-align: center;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      min-width: auto;
      min-height: auto;
      line-height: 14px;
      word-spacing: 0px;
    }

    .read > a {
      float: none;
      text-decoration: underline;
      cursor: pointer;
    }

    .bottom {
      padding-bottom: calc(var(--privacy-padding) - var(--spacing-unit) * .75);
    }
  </style>
  <script src="{{ route "javascript" "name" "index" }}" defer></script>
</head>

<body>
  <div class="wrapper">
    <button class="add-button">Add to home screen</button>
    <div class="archived" id="archived">
      {{- range $i, $collect := .Collect -}}
      <ul class="row">
        <li class="src" title="{{ $collect.Src }}">{{ $collect.Src }}</li>
        <li class="dst" title="{{ $collect.Dst }}"><a href="{{ $collect.Dst }}" target="blank">{{ $collect.Dst }}</a></li>
      </ul>
      {{end}}
    </div>
    <div class="form">
      <form method="post">
        <div class="box">
          <textarea
            id="text"
            name="text"
            value=""
            autocapitalize="off"
            autocorrect="off"
            spellcheck="false"
            placeholder="e.g. https://www.eff.org https://www.wikipedia.org"
            autofocus
            required
          ></textarea>
          <input
            type="submit"
            id="playback"
            name="action"
            value=""
            accesskey="p"
            formaction="/playback"
            aria-label="Search"
            title="Search content"
          >
          <input
            type="submit"
            id="wayback"
            name="action"
            value=""
            accesskey="s"
            formaction="/wayback"
            aria-label="Archive"
            title="Archive content"
          >
        </div>
      </form>
    </div>
    {{ if not .PrivacyURL -}}
    <div class="bottom"></div>
    {{- end}}
    {{- if .PrivacyURL -}}
    <div class="privacy">
      <span class="read">By messaging Wayback Archiver, you have read our <a href="{{- .PrivacyURL -}}" target="_blank" rel="noreferrer">Privacy Policy</a>.</span>
    </div>
    {{- end}}
  </div>
</body>

</html>
